<template>
  <view class="attendance-detail-container">
    <view class="detail-card">
      <view class="card-header">
        <text class="header-title">打卡详情</text>
      </view>
      
      <view class="card-content">
        <view class="detail-item">
          <text class="item-label">日期</text>
          <text class="item-value">{{ formatDate(attendanceInfo.attendanceDate) }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">星期</text>
          <text class="item-value">{{ getWeekDay(attendanceInfo.attendanceDate) }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">签到时间</text>
          <text class="item-value">{{ attendanceInfo.clockInTime || '未签到' }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">签到地点</text>
          <text class="item-value">{{ attendanceInfo.clockInLocation || '无' }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">签退时间</text>
          <text class="item-value">{{ attendanceInfo.clockOutTime || '未签退' }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">签退地点</text>
          <text class="item-value">{{ attendanceInfo.clockOutLocation || '无' }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">状态</text>
          <text class="item-value status" :class="getStatusClass(attendanceInfo)">{{ getStatusText(attendanceInfo) }}</text>
        </view>
        
        <view class="detail-item">
          <text class="item-label">工作时长</text>
          <text class="item-value">{{ calculateWorkHours(attendanceInfo) }}</text>
        </view>
        
        <view class="detail-item" v-if="attendanceInfo.remark">
          <text class="item-label">备注</text>
          <text class="item-value">{{ attendanceInfo.remark }}</text>
        </view>
      </view>
    </view>
    
    <view class="action-buttons" v-if="canEdit">
      <button type="primary" @click="handleEdit">修改记录</button>
    </view>
  </view>
</template>

<script>
import { getAttendance } from "@/api/system/attendance";

export default {
  name: "AttendanceDetail",
  data() {
    return {
      // 打卡ID
      id: null,
      // 打卡信息
      attendanceInfo: {},
      // 是否可编辑
      canEdit: false
    };
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getDetail();
    }
  },
  methods: {
    // 获取打卡详情
    getDetail() {
      getAttendance(this.id).then(res => {
        if (res.code === 200) {
          this.attendanceInfo = res.data || {};
          
          // 判断是否有权限编辑（可以根据实际需求调整）
          const userInfo = this.$store.getters.userInfo;
          this.canEdit = userInfo && (userInfo.roles.some(role => role.roleKey === 'admin') || 
                        this.attendanceInfo.userId === userInfo.userId);
        }
      });
    },
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 获取星期几
    getWeekDay(dateStr) {
      if (!dateStr) return '';
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      return weekdays[new Date(dateStr).getDay()];
    },
    // 获取状态样式类
    getStatusClass(item) {
      if (!item.clockInTime) return 'status-absent';
      if (!item.clockOutTime) return 'status-incomplete';
      return 'status-normal';
    },
    // 获取状态文本
    getStatusText(item) {
      if (!item.clockInTime) return '缺勤';
      if (!item.clockOutTime) return '未签退';
      return '正常';
    },
    // 计算工作时长
    calculateWorkHours(item) {
      if (!item.clockInTime || !item.clockOutTime) return '0小时0分钟';
      
      const clockIn = new Date(`${this.formatDate(item.attendanceDate)} ${item.clockInTime}`);
      const clockOut = new Date(`${this.formatDate(item.attendanceDate)} ${item.clockOutTime}`);
      
      if (isNaN(clockIn.getTime()) || isNaN(clockOut.getTime())) return '0小时0分钟';
      
      // 计算时间差（毫秒）
      const diff = clockOut.getTime() - clockIn.getTime();
      
      // 转换为小时和分钟
      const hours = Math.floor(diff / (1000 * 60 * 60));
      const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
      
      return `${hours}小时${minutes}分钟`;
    },
    // 跳转到编辑页面
    handleEdit() {
      this.$tab.navigateTo(`/pages/system/attendance/edit?id=${this.id}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.attendance-detail-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.detail-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  
  .card-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    
    .header-title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  
  .card-content {
    .detail-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-label {
        width: 100px;
        color: #666;
      }
      
      .item-value {
        flex: 1;
        font-weight: bold;
        
        &.status {
          padding: 2px 8px;
          border-radius: 12px;
          font-size: 14px;
          display: inline-block;
          
          &.status-normal {
            background-color: #e1f3d8;
            color: #67c23a;
          }
          
          &.status-incomplete {
            background-color: #fdf6ec;
            color: #e6a23c;
          }
          
          &.status-absent {
            background-color: #fde2e2;
            color: #f56c6c;
          }
        }
      }
    }
  }
}

.action-buttons {
  button {
    width: 100%;
    height: 45px;
    font-size: 16px;
  }
}
</style> 